<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-plus"
          style="float: right"
          @click="addTemplateDeviceSensorHardwareConfig"
        />
      </el-form-item>
      <el-form-item>
        <el-select v-model="connectTypeId">
          <el-option
            v-for="item in connectTypeList"
            :key="item.connectTypeId"
            :label="item.name"
            :value="item.connectTypeId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="name"
          clearable
          :placeholder="$t('name')"
          @change="listTemplateDeviceSensorHardwareConfig"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="listTemplateDeviceSensorHardwareConfig">{{ $t('search') }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-link" @click="dialogConnectTypeVisible=true">{{ $t('type') }}</el-button>
      </el-form-item>
    </el-form>
    <div class="uni-scroll app-container" style="height: calc(100vh - 180px)">
      <el-table
        :data="templateList"
        style="width: 100%;"
      >
        <el-table-column :label="$t('id')"  width="100">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.templateId"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('sensor')+$t('name')" >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.name"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('type')"  width="180">
          <template slot-scope="scope">
            <el-select v-model="scope.row.connectTypeId" :disabled="!scope.row.isAdd">
              <el-option
                v-for="item in connectTypeList"
                :key="item.connectTypeId"
                :label="item.name"
                :value="item.connectTypeId"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column :label="$t('function')+$t('code')"  width="100">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.functionCode"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('registerAddress')"  width="120">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.registerAddress"
            />
          </template>
        </el-table-column>

        <el-table-column :label="$t('registerNum')"  width="100">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.registerNum"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('keyName')" >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.keyName"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('multiple')" >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.multiple"
            />
          </template>
        </el-table-column>
        <el-table-column  width="210">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="insertOrUpdateTemplateDeviceSensorHardwareConfig(scope.row)"
            >{{ $t('save') }}</el-button>
            <el-button
              v-if="!scope.row.isAdd"
              type="danger"
              @click="deleteTemplateDeviceSensorHardwareConfig(scope.row)"
            >{{ $t('delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      :visible.sync="dialogConnectTypeVisible"
    >
      <connect-type />
    </el-dialog>
  </div>
</template>

<script>
import {
  failureNotice,
  successNotice
} from '@/util/common'
import {
  insertTemplateDeviceSensorHardwareConfig,
  updateTemplateDeviceSensorHardwareConfig,
  deleteTemplateDeviceSensorHardwareConfig,
  listTemplateDeviceSensorHardwareConfig } from '@/api/iot/iotTemplateDeviceSensorHardwareConfigApi'
import {
  listTemplateDeviceSensorHardwareConnectType
} from '@/api/iot/iotTemplateDeviceSensorHardwareConnectTypeApi'
import ConnectType from './components/ConnectType'
export default {
  name: 'TemplateDeviceSensorHardwareConfig',
  components: {
    ConnectType
  },
  data() {
    return {
      dialogConnectTypeVisible: false,
      templateList: [],
      connectTypeList: [],
      startRank: false,
      connectTypeId: null,
      name: null
    }
  },
  created() {
    this.listTemplateDeviceSensorHardwareConnectType()
  }, methods: {
    listTemplateDeviceSensorHardwareConnectType() {
      listTemplateDeviceSensorHardwareConnectType().then(res => {
        const { data, code } = res
        if (code === '200') {
          this.connectTypeList = data
          this.listTemplateDeviceSensorHardwareConfig()
        }
      })
    },
    listTemplateDeviceSensorHardwareConfig() {
      listTemplateDeviceSensorHardwareConfig({
        connectTypeId: this.connectTypeId,
        name: this.name
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.templateList = data
        }
      })
    },
    insertOrUpdateTemplateDeviceSensorHardwareConfig(item) {
      if (item.isAdd) {
        insertTemplateDeviceSensorHardwareConfig(item).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
          }
          this.listTemplateDeviceSensorHardwareConfig()
        })
      } else {
        updateTemplateDeviceSensorHardwareConfig(item).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
          }
          this.listTemplateDeviceSensorHardwareConfig()
        })
      }
    },
    deleteTemplateDeviceSensorHardwareConfig(item) {
      const that = this
      this.$confirm(this.$t('delete'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteTemplateDeviceSensorHardwareConfig({
            templateConfigId: item.templateConfigId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
            }
            that.listTemplateDeviceSensorHardwareConfig()
          })
        })
    },
    addTemplateDeviceSensorHardwareConfig() {
      for (let i = 0, j = this.templateList.length; i < j; i++) {
        if (this.templateList[i].isAdd) {
          return
        }
      }
      const item = {
        name: '',
        connectTypeId: '',
        registerAddress: '',
        functionCode: '',
        registerNum: '',
        keyName: '',
        isAdd: true
      }
      this.templateList.push(item)
    }
  }
}
</script>


